<template>
  <div class="filter">
    <el-form :model="formInline" class="demo-form-inline">
      <el-form-item :label="t('formData.wellName')" prop="wellName">
        <el-select
          v-model="formInline.wellName"
          filterable
          :placeholder="t('formData.wellNameInfo')"
          style="width: 240px"
          clearable
          :remote-method="remoteMethod"
          :loading="stuAllLoading"
          :filter-method="handleChange"
        >
          <el-option
            v-for="item in siteList"
            :key="item.id"
            :label="item.wellName"
            :value="item.id"
            @click="addForm(item)"
          >
            <span style="float: left"> {{ t('formData.wellName') }}：{{ item.wellName }} {{ t('formData.WellCode') }}：{{ item.wellCode }}</span>
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
  <div class="content">
    <div>
      <div class="contain">
        <div style="width: 185px; text-align: center">
          <div style="height: 30px; width: 40px; background: red; margin: auto"></div>
        </div>
        <div
          style="
            display: flex;
            width: 185px;
            justify-content: center;
            border-bottom: 2px solid #333;
            position: relative;
          "
        >
          <div class="scale">
            <div
              v-for="(n, i) in num"
              :key="i"
              class="scale-mark"
              :style="{
                top: `${i * (100 / 20)}%`,
                width: n % 5 === 0 || n === 0 ? '25px' : '20px'
              }"
            >
              <div style="margin-left: -20px; margin-top: -5px">{{
                n % 5 === 0 ? 2 * n : ''
              }}</div></div
            ></div
          >
          <div style="position: absolute; border-top: 2px solid #333; margin-top: -1px">
            <svg width="50" height="145" viewBox="0 0 50 145">
              <line x1="8" y1="1" x2="43" y2="30" stroke="black" stroke-width="2" />
              <line x1="43" y1="1" x2="5" y2="30" stroke="black" stroke-width="2" />
              <line x1="5" y1="30" x2="45" y2="60" stroke="black" stroke-width="2" />
              <line x1="43" y1="30" x2="3" y2="60" stroke="black" stroke-width="2" />
              <line x1="3" y1="60" x2="48" y2="90" stroke="black" stroke-width="2" />
              <line x1="48" y1="60" x2="1" y2="90" stroke="black" stroke-width="2" />
              <line x1="1" y1="90" x2="49" y2="120" stroke="black" stroke-width="2" />
              <line x1="50" y1="90" x2="0" y2="120" stroke="black" stroke-width="2" />
              <line x1="0" y1="120" x2="49" y2="145" stroke="black" stroke-width="2" />
              <line x1="50" y1="120" x2="0" y2="145" stroke="black" stroke-width="2" />
            </svg>
            <div style="position: absolute; top: 0; margin: auto; width: 100%">
              <div style="height: 80px; width: 2px; background: #333; margin: auto"></div>
              <img
                src="@/assets/imgs/gou.png"
                alt=""
                style="height: 40px; width: 40px; margin: auto; margin-left: 5px"
              />
            </div>
          </div>
          <div class="scle">
            <div
              v-for="(n, i) in num"
              :key="i"
              class="scale-marks"
              :style="{
                top: `${i * (100 / 20)}%`,
                width: n % 5 === 0 || n === 0 ? '25px' : '20px'
              }"
            ></div>
          </div>
        </div>
        <div style="display: flex; width: 185px">
          <div class="grid"></div>
          <div class="trapezoid"></div>
          <div class="grid"></div>
        </div>
        <div class="lines">
          <div
            style="
              height: 100px;
              width: 20px;
              border: 1px solid #333;
              background: #6691cd;
              writing-mode: vertical-rl;
              position: relative;
            "
          >
            <div>0.00</div>
            <div style="position: absolute; top: -12px; left: 0">
              <div
                style="
                  width: 200px;
                  height: 10px;
                  border-top: 2px solid #333;
                  border-left: 2px solid #333;
                  margin-left: 10px;
                "
              >
                <div
                  style="
                    width: 160px;
                    height: 90px;
                    border: 2px solid #333;
                    margin-left: 50px;
                    margin-top: -45px;
                  "
                >
                </div>
                <div
                  style="
                    width: 20px;
                    height: 90px;
                    border-right: 2px solid #333;
                    border-bottom: 2px solid #333;
                    margin-right: -214px;
                    margin-top: 47px;
                  "
                >
                </div>
                <div>
                  <img
                    src="@/assets/imgs/zhu.png"
                    alt=""
                    style="height: 70px; width: 110px; position: absolute; top: 105px; right: 0"
                  />
                  <div
                    style="writing-mode: horizontal-tb; position: absolute; top: 115px; right: 35px"
                    >100.0</div
                  >
                </div>
                <div
                  style="
                    height: 60px;
                    width: 2px;
                    background: #333;
                    position: absolute;
                    top: 165px;
                    right: 50px;
                  "
                ></div>
                <div>
                  <img
                    src="@/assets/imgs/zhu.png"
                    alt=""
                    style="height: 70px; width: 110px; position: absolute; top: 215px; right: 0"
                  />
                  <div
                    style="writing-mode: horizontal-tb; position: absolute; top: 225px; right: 35px"
                    >100.0</div
                  >
                </div>
                <div
                  style="
                    height: 2px;
                    width: 57px;
                    background: #333;
                    position: absolute;
                    top: 250px;
                    right: 95px;
                  "
                ></div>
                <div
                  style="
                    height: 50px;
                    width: 20px;
                    border-top: 2px solid #333;
                    border-right: 2px solid #333;
                    position: absolute;
                    top: 140px;
                    right: 162px;
                  "
                ></div>
                <div
                  style="
                    height: 100px;
                    width: 20px;
                    border: 1px solid #333;
                    background: #6691cd;
                    writing-mode: vertical-rl;
                    position: absolute;
                    top: 192px;
                    right: 152px;
                  "
                  >0.0</div
                >
              </div>
            </div>
          </div>
          <div style="height: 10px; width: 2px; background: #333; margin: auto"></div>
        </div>
        <div style="position: absolute; top: 0px; right: 110px; background: #c7daef">
          <img
            src="@/assets/imgs/beng.png"
            alt=""
            style="height: 25px; width: 50px; position: relative"
          />
          <div
            id="movingBox"
            style="
              height: 25px;
              width: 2px;
              background: #d81e06;
              position: absolute;
              top: 0px;
              left: 10px;
            "
          ></div>
          <div style="font-size: 12px; text-align: center; margin-top: -5px; color: #4818e6"
            >停泵</div
          >
          <div
            style="
              font-size: 14px;
              text-align: center;
              color: #4818e6;
              position: absolute;
              top: 0px;
              right: -12px;
            "
            >1</div
          >
        </div>
        <div style="position: absolute; top: 42px; right: 110px; background: #c7daef">
          <img src="@/assets/imgs/beng.png" alt="" style="height: 25px; width: 50px" />
          <div style="font-size: 12px; text-align: center; margin-top: -5px; color: #4818e6"
            >停泵</div
          >
          <div
            style="
              font-size: 14px;
              text-align: center;
              color: #4818e6;
              position: absolute;
              top: 0;
              right: -12px;
            "
            >2</div
          >
        </div>
        <div style="position: absolute; top: 91px; right: 110px; background: #c7daef">
          <img src="@/assets/imgs/beng.png" alt="" style="height: 25px; width: 50px" />
          <div style="font-size: 12px; text-align: center; margin-top: -5px; color: #4818e6"
            >停泵</div
          >
          <div
            style="
              font-size: 14px;
              text-align: center;
              color: #4818e6;
              position: absolute;
              top: 0px;
              right: -12px;
            "
            >3</div
          >
        </div>
        <div
          style="width: 185px; text-align: center; position: relative; border-top: 1px solid #333"
        >
          <div class="card" :style="{ background: number[number.length - 1].background }">
            <div v-for="(item, index) in number" :key="index">
              <div :style="{ background: item.background, height: item.height }"></div>
            </div>
          </div>
          <div style="position: absolute; top: 0; left: 65px">
            <div class="cards"></div>
            <div class="totalNum">{{ total }}</div>
          </div>
          <div style="position: absolute; top: 0; text-align: center; width: 100%">
            <div
              class="line"
              :style="{ height: 450 * (heights / total) - 11 + 'px' }"
              style="margin-top: -44px"
            ></div>
            <div
              ><img
                src="@/assets/imgs/zt.png"
                alt=""
                style="height: 60px; width: 55px; margin: auto"
            /></div>
            <div
              style="position: absolute; left: 0px; background: #fff; padding: 5px; color: #4818e6"
              :style="{ top: 450 * (heights / total) - 11 + 'px' }"
              >{{ heights }}</div
            >
          </div>
        </div>
        <div class="bottom">
          <div class="bottomLine">设计井深：2178</div>
          <div class="bottomLine">设计目的层：KIq3</div>
          <div class="bottomLine">目前层位：KIq3</div>
        </div>
      </div>
      <!-- <div class="btn">
        <div>坐卡</div>
        <img
          src="@/assets/imgs/zuanjing.png"
          alt=""
          style="height: 20px; width: 20px; position: absolute; right: 10px; top: 15px"
        />
      </div> -->
    </div>
    <div class="infomation">
      <div
        v-for="(item, index) in listData"
        :key="index"
        style="
          display: flex;
          height: 30px;
          line-height: 30px;
          width: 100%;
          margin-top: 4px;
          align-items: center;
        "
      >
        <div style="width: 120px; text-align: right; margin-right: 5px; height: 30px">{{
          getName(item)
        }}</div>
        <div
          style="width: 100px; background: #fff; color: #4818e6; text-align: center; height: 30px"
          >{{ getValue(index) }}</div
        >
      </div>
    </div>
    <div class="infomation">
      <div
        v-for="(item, index) in listData2"
        :key="index"
        style="
          display: flex;
          height: 30px;
          line-height: 30px;
          width: 100%;
          margin-top: 4px;
          align-items: center;
        "
      >
        <div style="width: 120px; text-align: right; margin-right: 5px; height: 30px">{{
          getName(item)
        }}</div>
        <div
          style="width: 100px; background: #fff; color: #4818e6; text-align: center; height: 30px"
          >{{ getValue2(index) }}</div
        >
      </div>
    </div>
    <div class="infomation">
      <div
        v-for="(item, index) in listData3"
        :key="index"
        style="
          display: flex;
          height: 30px;
          line-height: 30px;
          width: 100%;
          margin-top: 4px;
          align-items: center;
        "
      >
        <div style="width: 120px; text-align: right; margin-right: 5px; height: 30px">{{
          getName(item)
        }}</div>
        <div
          style="width: 100px; background: #fff; color: #4818e6; text-align: center; height: 30px"
          >{{ getValue3(index) }}</div
        >
      </div>
    </div>
  </div>
  <!-- <div style="width: calc(100% - 10px); height: 80px; display: flex; align-items: center">
    <div style="position: relative; height: 80px; width: 80px">
      <img src="@/assets/imgs/circle.png" alt="" style="height: 80px; width: 80px" />
      <div
        style="
          position: absolute;
          top: 20px;
          height: 40px;
          width: 80px;
          text-align: center;
          line-height: 20px;
          color: #d3217b;
        "
      >
        <div>时效</div>
        <div>0%</div>
      </div>
    </div>
    <div class="sclexx">
      <div
        v-for="i in 12"
        :key="i"
        class="scale-markxx"
        :style="{
          left: `${i * (100 / 12)}%`
        }"
        >
        <div style="margin-top: 20px;margin-left: -20px;width:40px;text-align:center">{{ i===12?2 * i+'(小时)':2 * i }}</div></div
      >
    </div>
  </div> -->
</template>
 
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { SiteApi, SiteVO } from '@/api/base/site'
import { RtParameterVOApi } from '@/api/search/rtdata/rtparameter'

const { t } = useI18n()
const stuAllLoading = ref(false)
const height = ref(0)
const background = ref()
const total = ref(1015.6)
const heights = ref(400)
const num = ref([...Array(20).keys()].map((i) => i + 1).reverse())
const number = ref([
  { value: 400.2, name: '1', background: '#AC7A49' },
  { value: 260.1, name: '2', background: '#645D50' },
  { value: 355.3, name: '3', background: '#4B2914' }
])
const info1 = ref([])
const info2 = ref([])
const info3 = ref([])
const getName = (itemName) => {
  return t('list.' + itemName)
}
const getValue = (index) => {
  if (info1.value.length === 0) {
    return ''
  } else {
    return info1.value[index].value
  }
}
const getValue2 = (index) => {
  if (info2.value.length === 0) {
    return ''
  } else {
    return info2.value[index].value
  }
}
const getValue3 = (index) => {
  if (info3.value.length === 0) {
    return ''
  } else {
    return info3.value[index].value
  }
}
const list = ref([])
const listData = ref([
  'p1',
  'p2',
  'p3',
  'p4',
  'p5',
  'p6',
  'p7',
  'p8',
  'p9',
  'p10',
  'p11',
  'p12',
  'p13',
  'p14',
  'p15',
  'p16',
  'p17',
  'p18',
  'p19',
  'p20',
  'p21',
  'p22',
  'p23',
  'p24',
  'p25',
  'p26',
  'p27',
  'p28',
  'p29',
  'p30',
  'p31',
  'p32',
  'p33',
  'p34',
  'p35',
  'p36',
  'p37',
  'p38',
  'p39',
  'p40'
])
const listData2 = ref([
  'p41',
  'p42',
  'p43',
  'p44',
  'p45',
  'p46',
  'p47',
  'p48',
  'p49',
  'p50',
  'p51',
  'p52',
  'p53',
  'p54',
  'p55',
  'p56',
  'p57',
  'p58',
  'p59',
  'p60',
  'p61',
  'p62',
  'p63',
  'p64',
  'p65',
  'p66',
  'p67',
  'p68',
  'p69',
  'p70',
  'p71',
  'p72',
  'p73',
  'p74',
  'p75',
  'p76',
  'p77',
  'p78',
  'p79',
  'p80'
])
const listData3 = ref([
  'p81',
  'p82',
  'p83',
  'p84',
  'p85',
  'p86',
  'p87',
  'p88',
  'p89',
  'p90',
  'p91',
  'p92',
  'p93',
  'p94',
  'p95',
  'p96',
  'p97',
  'p98',
  'p99',
  'p100',
  'p101',
  'p102',
  'p103',
  'p104',
  'p105',
  'p106',
  'p107',
  'p108',
  'p109',
  'p110',
  'p111',
  'p112',
  'p113',
  'p114',
  'p115',
  'p116',
  'p117',
  'p118',
  'p119',
  'p120'
])
const formInline = ref({
  value: '',
  wellId: '', //井ID
  p4: '' //井号
})

onMounted(async () => {
  number.value.forEach((i) => {
    i.height = 450 * (i.value / total.value) + 'px'
  })
  const param = {
    wellId: formInline.value.wellId, //井ID
    p4: formInline.value.p4 //井号
  }
  siteList.value = await SiteApi.getSiteList('')
  const data = await RtParameterVOApi.getNewOneOnMounted(param)
  data.forEach((i, index) => {
    if (index <= 40) {
      info1.value.push(i)
    } else if (index > 40 && index <= 80) {
      info2.value.push(i)
    } else if (index > 80 && index <= 120) {
      info3.value.push(i)
    }
  })
  startScroll()
  var box = document.getElementById('movingBox')
  var currentPosition = 0
  var direction = 'right'

  var intervalId = setInterval(function () {
    if (direction === 'right') {
      currentPosition += 10
      if (currentPosition >= 30) {
        direction = 'left'
      }
    } else {
      currentPosition -= 10
      if (currentPosition <= 10) {
        direction = 'right'
      }
    }
    box.style.left = currentPosition + 'px'
  }, 1000)
})

/*---------------------------获取现场信息------------------------------*/
const siteList = ref<SiteVO[]>([])
const remoteMethod = async (query) => {
  stuAllLoading.value = true
  siteList.value = []
  stuAllLoading.value = false
  siteList.value = await SiteApi.getSiteList(query)
}

const siteName = ref('')

const handleChange = async (query) => {
  siteList.value = []
  siteList.value = await SiteApi.getSiteList(query)
  // siteName.value = siteList.value[1].wellName
}

const addForm = async (item) => {
  stopScroll()
  info1.value = []
  info2.value = []
  info3.value = []
  formInline.value.wellId = item.wellId
  formInline.value.p4 = item.wellName
  const param = {
    wellId: formInline.value.wellId, //井ID
    p4: formInline.value.p4 //井号
  }
  const data = await RtParameterVOApi.getNewOneOnMounted(param)
  if (data) {
    data.forEach((i, index) => {
      if (index <= 40) {
        info1.value.push(i)
      } else if (index > 40 && index <= 80) {
        info2.value.push(i)
      } else if (index > 80 && index <= 120) {
        info3.value.push(i)
      }
    })
    console.log('====')
    startScroll()
  } else {
    stopScroll()
  }
}
let scrollInterval = null
const startScroll = () => {
  scrollInterval = setInterval(getNew, 2000)
}
const getNew = async () => {
  info1.value = []
  info2.value = []
  info3.value = []
  const param = {
    wellId: formInline.value.wellId, //井ID
    p4: formInline.value.p4 //井号
  }
  const data = await RtParameterVOApi.getNewOne(param)
  data.forEach((i, index) => {
    if (index <= 40) {
      info1.value.push(i)
    } else if (index > 40 && index <= 80) {
      info2.value.push(i)
    } else if (index > 80 && index <= 120) {
      info3.value.push(i)
    }
  })
}
const stopScroll = () => {
  clearInterval(scrollInterval)
}
onUnmounted(() => {
  stopScroll()
})
</script>
 
<style scoped>
.content {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 20px);
  padding: 10px;
}
.contain {
  height: 716px;
  width: 400px;
  padding: 0 20px;
  border: 2px solid #333;
  background: #c7daef;
  border-radius: 5px;
  position: relative;
}
.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #333;
  font-size: 16px;
  font-weight: 600;
  border-radius: 5px;
  margin-top: 10px;
  background: #c7daef;
  color: #4818e6;
  position: relative;
}
.scale {
  position: relative;
  width: 1px;
  height: 145px; /* 设置刻度线的高度 */
  background-color: red; /* 设置刻度线的颜色 */
  transform: rotate(4deg);
  /* 为了保证内容不随div旋转而消失，可以使用以下属性 */
  transform-origin: 0 0; /* 确定旋转的基点，默认是元素的中心点 */
  margin-left: -2px;
}
.scle {
  position: relative;
  width: 1px;
  height: 145px; /* 设置刻度线的高度 */
  background-color: red; /* 设置刻度线的颜色 */
  transform: rotate(-4deg);
  /* 为了保证内容不随div旋转而消失，可以使用以下属性 */
  transform-origin: 0 0; /* 确定旋转的基点，默认是元素的中心点 */
  margin-left: 34px;
  margin-top: -1px;
}
.sclexx {
  position: relative;
  width: 100%;
  height: 40px; /* 设置刻度线的高度 */
  background-color: #bccde5; /* 设置刻度线的颜色 */
}
.scale-mark {
  position: absolute;
  right: 0;
  height: 2px; /* 设置每个小格的宽度 */
  width: 6px; /* 设置每个小格的高度 */
  background-color: #333; /* 设置小格的颜色 */
  transform: rotate(-4deg);
  /* 为了保证内容不随div旋转而消失，可以使用以下属性 */
  transform-origin: 0 0; /* 确定旋转的基点，默认是元素的中心点 */
}
.scale-markxx {
  position: absolute;
  top: 0;
  width: 2px; /* 设置每个小格的宽度 */
  height: 20px; /* 设置每个小格的高度 */
  background-color: #333; /* 设置小格的颜色 */
  margin-top: 40px;
  margin-left: -2px;
}
.scale-marks {
  position: absolute;
  height: 2px; /* 设置每个小格的宽度 */
  width: 6px; /* 设置每个小格的高度 */
  background-color: #333; /* 设置小格的颜色 */
  transform: rotate(4deg);
  /* 为了保证内容不随div旋转而消失，可以使用以下属性 */
  transform-origin: 0 0; /* 确定旋转的基点，默认是元素的中心点 */
}
.line1 {
  height: 50px;
  width: 1px;
  background: green;
  transform: rotate(-45deg);
  /* 为了保证内容不随div旋转而消失，可以使用以下属性 */
  transform-origin: 0 0; /* 确定旋转的基点，默认是元素的中心点 */
}
.grid {
  height: 40px;
  width: 40px;
  border: 1px solid #333;
  background-image: url('@/assets/imgs/grid.png');
  /* background-repeat: repeat; */
  background-size: cover;
}
.trapezoid {
  border-top: 42px solid red; /* 下边框宽度 */
  border-left: 25px solid transparent; /* 左边框透明 */
  border-right: 25px solid transparent; /* 右边框透明 */
  height: 0; /* 高度设置为0 */
  width: 50px; /* 梯形的宽度 */
}
.card {
  height: 497px;
  width: 120px;
  background: red;
  margin: auto;
}
.cards {
  height: 450px;
  width: 55px;
  background: #fff;
  border: 1px solid #333;
  border-top: none;
  margin: auto;
}
.totalNum {
  padding: 3px;
  background: #fff;
  border: 1px solid #333;
  margin-top: 3px;
}
.line {
  background: linear-gradient(to right, #333, #fff, #333);
  height: 50px;
  width: 20px;
  margin: auto;
}
.bottom {
  position: absolute;
  bottom: 10px;
  right: 30px;
  width: 200px;
}
.bottomLine {
  width: 100%;
  border-radius: 10px;
  background: #fff;
  margin-top: 10px;
  padding: 5px;
  font-weight: 500;
}
.lines {
  position: absolute;
  top: 65px;
  right: 245px;
  width: 20px;
  text-align: center;
}
.infomation {
  background: #c7daef;
  width: 300px;
  padding: 20px 0;
  border-radius: 10px;
}
.filter {
  width: calc(100% - 20px);
  height: 50px;
  background: #fff;
  padding: 10px;
  margin-top: 40px;
  margin-left: 10px;
  margin-bottom: 20px;
}
.el-form {
  margin-top: 10px;
}
</style>

